<template>
	<view class="feedback-page">
		<!-- Tab切换 -->
		<up-tabs :list="tabList" :current="currentTab" @change="handleTabChange" :lineWidth="40" :lineHeight="3"
			lineColor="#667eea">
		</up-tabs>

		<!-- 提交反馈 -->
		<view v-show="currentTab === 0" class="submit-section">
			<!-- 反馈类型 -->
			<view class="form-item">
				<view class="label">
					<text>反馈类型</text>
					<text class="required">*</text>
				</view>
				<view class="type-buttons">
					<view v-for="type in feedbackTypes" :key="type.value" class="type-btn"
						:class="{ 'active': formData.type === type.value }" @click="formData.type = type.value">
						{{ type.label }}
					</view>
				</view>
			</view>

			<!-- 反馈标题 -->
			<view class="form-item">
				<view class="label">
					<text>标题</text>
					<text class="required">*</text>
				</view>
				<input v-model="formData.title" placeholder="简要描述问题" class="input" />
			</view>

			<!-- 反馈内容 -->
			<view class="form-item">
				<view class="label">
					<text>内容</text>
					<text class="required">*</text>
				</view>
				<textarea v-model="formData.content" placeholder="详细描述问题或建议" class="textarea" maxlength="500" />
				<view class="count">{{ formData.content.length }}/500</view>
			</view>

			<!-- 图片上传 -->
			<view class="form-item">
				<view class="label">图片（选填）</view>
				<up-upload :fileList="fileList" @afterRead="afterRead" @delete="deleteFile" multiple :maxCount="3"
					width="140rpx" height="140rpx">
				</up-upload>
			</view>

			<!-- 联系方式 -->
			<view class="form-item">
				<view class="label">联系方式（选填）</view>
				<input v-model="formData.contact" placeholder="手机号或邮箱" class="input" />
			</view>

			<!-- 提交按钮 -->
			<button @click="handleSubmit" :disabled="submitting" class="submit-btn">
				{{ submitting ? '提交中...' : '提交反馈' }}
			</button>
		</view>

		<!-- 历史记录 -->
		<view v-show="currentTab === 1" class="history-section">
			<!-- 筛选 -->
			<picker mode="selector" :range="filterOptions" range-key="label" @change="handleFilterChange">
				<view class="filter">
					<text>{{ filterOptions[filterIndex].label }}</text>
					<up-icon name="arrow-down" size="14"></up-icon>
				</view>
			</picker>

			<!-- 列表 -->
			<view class="list">
				<view v-if="feedbackList.length === 0" class="empty">
					<text>暂无反馈记录</text>
				</view>
				<view v-else>
					<view v-for="item in feedbackList" :key="item.feedbackId" class="list-item">
						<view class="item-header">
							<text class="type-tag">{{ getTypeLabel(item.type) }}</text>
							<text class="status" :class="`status-${item.status}`">{{ getStatusText(item.status) }}</text>
						</view>
						<view class="title">{{ item.title }}</view>
						<view class="content">{{ item.content }}</view>
						<view class="footer">
							<text class="time">{{ formatTime(item.createTime) }}</text>
							<up-icon name="trash" size="16" color="#999" @click.stop="handleDelete(item)"></up-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { submitFeedback, getMyFeedbackList, deleteFeedback } from '../../server/api/feedback.js';
import showToast from '../../utils/showToast.js';

const tabList = ref([{ name: '提交反馈' }, { name: '历史记录' }]);
const currentTab = ref(0);

const feedbackTypes = ref([
	{ value: 'experience', label: '体验问题' },
	{ value: 'feature', label: '功能建议' },
	{ value: 'bug', label: 'Bug反馈' },
	{ value: 'other', label: '其他' }
]);

const formData = reactive({
	type: '',
	title: '',
	content: '',
	images: [],
	contact: ''
});

const fileList = ref([]);
const submitting = ref(false);
const filterIndex = ref(0);
const filterOptions = ref([
	{ label: '全部', value: '' },
	{ label: '体验问题', value: 'experience' },
	{ label: '功能建议', value: 'feature' },
	{ label: 'Bug反馈', value: 'bug' },
	{ label: '其他', value: 'other' }
]);
const feedbackList = ref([]);

const handleTabChange = (item) => {
	currentTab.value = item.index;
	if (item.index === 1 && feedbackList.value.length === 0) {
		loadFeedbackList();
	}
};

const afterRead = (event) => {
	let files = Array.isArray(event.file) ? event.file : [event.file];
	files.forEach(file => {
		fileList.value.push(file);
		formData.images.push(file.url);
	});
};

const deleteFile = (event) => {
	fileList.value.splice(event.index, 1);
	formData.images.splice(event.index, 1);
};

const handleSubmit = async () => {
	if (!formData.type) return showToast('请选择反馈类型', 'none');
	if (!formData.title.trim()) return showToast('请输入标题', 'none');
	if (!formData.content.trim()) return showToast('请输入内容', 'none');

	submitting.value = true;
	try {
		await submitFeedback({
			type: formData.type,
			title: formData.title.trim(),
			content: formData.content.trim(),
			images: formData.images,
			contact: formData.contact.trim()
		});
		showToast('提交成功', 'success');
		Object.assign(formData, { type: '', title: '', content: '', images: [], contact: '' });
		fileList.value = [];
		setTimeout(() => {
			currentTab.value = 1;
			loadFeedbackList();
		}, 1000);
	} catch (error) {
		showToast('提交失败', 'error');
	} finally {
		submitting.value = false;
	}
};

const loadFeedbackList = async () => {
	try {
		const res = await getMyFeedbackList({
			page: 1,
			pageSize: 20,
			type: filterOptions.value[filterIndex.value].value
		});
		feedbackList.value = res.code === 200 ? res.data.list || [] : [];
	} catch (error) {
		// 使用模拟数据
		feedbackList.value = [
			{ feedbackId: 1, type: 'bug', title: '图片加载慢', content: '帖子详情页图片加载特别慢', status: 'processing', createTime: '2024-01-15 10:30' },
			{ feedbackId: 2, type: 'feature', title: '增加夜间模式', content: '建议增加夜间模式功能', status: 'resolved', createTime: '2024-01-14 18:20' },
			{ feedbackId: 3, type: 'experience', title: '简化发布流程', content: '发布帖子流程可以更简化', status: 'pending', createTime: '2024-01-13 15:45' }
		];
	}
};

const handleFilterChange = (e) => {
	filterIndex.value = e.detail.value;
	loadFeedbackList();
};

const handleDelete = (item) => {
	uni.showModal({
		title: '提示',
		content: '确定删除？',
		success: async (res) => {
			if (res.confirm) {
				try {
					await deleteFeedback(item.feedbackId);
					showToast('删除成功', 'success');
					loadFeedbackList();
				} catch {
					showToast('删除失败', 'error');
				}
			}
		}
	});
};

const getTypeLabel = (type) => {
	return feedbackTypes.value.find(item => item.value === type)?.label || '其他';
};

const getStatusText = (status) => {
	const map = { pending: '待处理', processing: '处理中', resolved: '已解决', closed: '已关闭' };
	return map[status] || '未知';
};

const formatTime = (time) => {
	if (!time) return '';
	const diff = Date.now() - new Date(time);
	if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`;
	if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`;
	if (diff < 604800000) return `${Math.floor(diff / 86400000)}天前`;
	return time.substring(0, 10);
};
</script>

<style lang="scss" scoped>
.feedback-page {
	min-height: 100vh;
	background: #f5f5f5;
}

// 提交反馈
.submit-section {
	padding: 24rpx;

	.form-item {
		margin-bottom: 32rpx;

		.label {
			font-size: 28rpx;
			color: #333;
			margin-bottom: 16rpx;

			.required {
				color: #ff4d4f;
				margin-left: 4rpx;
			}
		}

		.type-buttons {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 16rpx;

			.type-btn {
				padding: 16rpx;
				background: #fff;
				border: 2rpx solid #e0e0e0;
				border-radius: 8rpx;
				text-align: center;
				font-size: 26rpx;
				color: #666;

				&.active {
					border-color: #667eea;
					color: #667eea;
					background: #f0f5ff;
				}
			}
		}

		.input,
		.textarea {
			width: 100%;
			padding: 20rpx;
			background: #fff;
			border: 2rpx solid #e0e0e0;
			border-radius: 8rpx;
			font-size: 28rpx;
		}

		.textarea {
			height: 200rpx;
		}

		.count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-top: 8rpx;
		}
	}

	.submit-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #667eea;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		font-size: 30rpx;
		margin-top: 40rpx;

		&[disabled] {
			opacity: 0.6;
		}
	}
}

// 历史记录
.history-section {
	padding: 24rpx;

	.filter {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 16rpx 24rpx;
		background: #fff;
		border-radius: 8rpx;
		margin-bottom: 24rpx;
		font-size: 28rpx;
	}

	.list {
		.empty {
			text-align: center;
			padding: 100rpx 0;
			color: #999;
			font-size: 28rpx;
		}

		.list-item {
			background: #fff;
			border-radius: 8rpx;
			padding: 24rpx;
			margin-bottom: 16rpx;

			.item-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 16rpx;

				.type-tag {
					padding: 4rpx 12rpx;
					background: #f0f5ff;
					color: #667eea;
					border-radius: 4rpx;
					font-size: 24rpx;
				}

				.status {
					font-size: 24rpx;

					&.status-pending {
						color: #fa8c16;
					}

					&.status-processing {
						color: #1890ff;
					}

					&.status-resolved {
						color: #52c41a;
					}

					&.status-closed {
						color: #999;
					}
				}
			}

			.title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 12rpx;
			}

			.content {
				font-size: 26rpx;
				color: #666;
				line-height: 1.6;
				margin-bottom: 16rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.footer {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 16rpx;
				border-top: 1px solid #f0f0f0;

				.time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}
	}
}
</style>

